<template>
<div class="cellView_box">
    <div class="cellView_Item" v-for="i in range(0, 3)">
        <div class="cellView_line">
            <!-- {{ '--' + props.dataArr }} -->
            <!-- // isQ: 0,//是否是题目 1 是 0 不是 这控制字体颜色
            // num: 1,// 空格里面的值
            // status: 0,// 状态 0 一般正常状态 1 填写数字与当前数值有冲突 
            // x: 0,// 方格所在位置坐标
            // y: 0 -->
              <div class="oneCell" 
              v-for="j in range(0, 3)" 
              :class="{
                confirmBG: dataArr[i*3 + j].status,
                sameBG: selNum == dataArr[i * 3 + j].num,
                inputCell: !dataArr[i*3+j].isQ,
                questionCell: dataArr[i*3+j].isQ
              }"
              @click="selBlockFun(i, j)"
              >
                <div class="input_box" v-if="i == posX && j == posY&&selBlock==dataArr[i*3+j].blockInd">
                    <input v-model="input_num" type="number"/>
                </div >
                <div v-else>
                    {{ dataArr[i*3+j].isQ?dataArr[i * 3 + j].num:dataArr[i*3+j].num?dataArr[i*3+j].num:'' }}
                    <!-- {{ (dataArr[i * 3 + j] || {}).blockInd}} -->
                </div>
              </div>
        </div>
    </div>
</div>
</template>

<script setup>
import {computed, inject, ref} from "vue";

const props = defineProps({
    dataArr: Array, 
    selBlock: Number,
    selNum: Number,
    posX: Number,
    posY: Number,
});
// const dataArr = ref(props.dataArr)
// const selBlock = ref(props.selBlock)
// const selNum = ref(props.selNum)
// const posX = ref(props.posX)
// const posY = ref(props.posY)
const range = inject('range');
const emit = defineEmits(['setPos']);
// const input_num = ref(0);
const selBlockFun = (i, j)=> {// 选中方格
    console.log(46);
   emit('setPos', i * 3 + j, props.blockInd);
}
</script>

<style>
.cellView_box{
    margin: 3px;
}
.cellView_Item {

}
.cellView_line {
    width: 100%;
    display: flex;
}
.oneCell {
    border: 1px solid black;
    height: 50px;
    width: 50px;
    text-align: center;
    display: inline-block;
    line-height: 50px;
}
/* 题目方格字体黑色加粗 */
.questionCell {
    font-weight: bold;
}
/* 填入数字字体加粗绿色 */
.inputCell {
    color: limegreen;
    font-weight: bold;
}
/* 与选中方格数值相同时有圆圈圈出 todo 先用背景色蓝色代替*/
.sameBG{
    border: 1px solid skyblue;
}
/* 有冲突 背景红色 */
.confirmBG{
    background-color: red;
}
.input_box input {
    width: 40px;
    height: 40px;
}
</style>